<template>
  <div class="profile-bind-view">
    <CharacterList
        :characters="profiles"
        :selectedCharacter="selectedProfile"
        @select-character="selectProfile"
    />

    <ProfileBinding
        :profile="selectedProfile"
        @bind-account="bindAccount"
        @unbind-account="unbindAccount"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import CharacterList from "@/views/account/profile/components/CharacterList.vue";
import ProfileBinding from "@/views/account/profile/components/ProfileBinding.vue";

// 模拟角色数据
const profiles = ref([
  {
    id: 1,
    name: "Steve",
    uuid: "6f5c53177c9c461dba5c0bf7df84028f",
    bedrockUuid: "853c80ef3c3749fdaa14938d48e9e9a4",
    javaUuid: null
  },
  {
    id: 2,
    name: "Alex",
    uuid: "069a79f444e94726a5befca90e38aaf5",
    bedrockUuid: null,
    javaUuid: "c6c8473dd1844f74bab28688eb0c4578"
  },
  {
    id: 3,
    name: "Enderman",
    uuid: "45266e44ca5e465d8846ed193bb68496",
    bedrockUuid: null,
    javaUuid: null
  }
])

const selectedProfile = ref(null)

// 添加默认选中第一个角色
onMounted(() => {
  if (profiles.value.length  > 0 && !selectedProfile.value)  {
    selectedProfile.value  = profiles.value[0]
  }
})

const selectProfile = (profile) => {
  selectedProfile.value  = profile
}

const bindAccount = ({ profileId, type, uuid }) => {
  const profile = profiles.value.find(p  => p.id  === profileId)
  if (profile) {
    if (type === 'bedrock') {
      profile.bedrockUuid  = uuid
    } else {
      profile.javaUuid  = uuid
    }
    ElMessage.success(' 账户绑定成功')
  }
}

const unbindAccount = ({ profileId, type }) => {
  const profile = profiles.value.find(p  => p.id  === profileId)
  if (profile) {
    if (type === 'bedrock') {
      profile.bedrockUuid  = null
    } else {
      profile.javaUuid  = null
    }
    ElMessage.success(' 账户已解绑')
  }
}
</script>

<style scoped>
.profile-bind-view {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #0f111a;
}

@media (max-width: 768px) {
  .profile-bind-view {
    flex-direction: column;
  }
}
</style>